<script setup>
import "@/views/Home/home.css"
import {homeStore} from "@/views/Home/home"
import {formatBytes} from "@/utils/ByteUtil";
import {ArrowRight, Setting} from "@element-plus/icons-vue";

const home = homeStore()

home.selectRootPath()

function beforeUpload(file) {
  home.uploadPath = home.currentPath
  const formData = new FormData();
  formData.append('file',file)
  home.uploadFile(formData)
  return false
}

</script>

<template>
  <div style="display: flex;justify-content: end;margin-left: auto;margin-right: 15px;margin-bottom: 20px">
    <el-upload
        multiple
        :before-upload="beforeUpload"
        style="display: flex;justify-content: start;margin-right: auto;margin-left: 10px;">
      <el-button>
        上传文件
      </el-button>
    </el-upload>
    <el-input style="width: 200px;height: 28px" placeholder="搜索文件" v-model="home.searchName" suffix-icon="Search"
              @keydown.enter="home.selectName(home.searchName,home.searchMaxSize)"/>
  </div>
  <div>
    <el-breadcrumb :separator-icon="ArrowRight" style="margin-left: 10px;margin-bottom: 10px">
      <el-breadcrumb-item v-for="(item,index) in home.pathCrumbs" @click="home.selectPathCrumbs(index)">
        <span class="smallHands" v-if="index === 0">全部文件</span>
        <span class="smallHands" v-if="index !== 0">{{ item }}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div>
    <el-table
        v-loading.fullscreen.lock="home.loading"
        :data="home.tableData"
        @row-click="home.clickRow"
        @row-contextmenu="home.rightClickRow"
        style="width: 100%;"
        max-height="909">
      <el-table-column label="名称">
        <template v-slot="scope">
          <div class="file-name"  v-if="scope.row.selected === true" style="background-color:#c4c4c4;">
            <div class="file-name--image">
              <el-image v-if="!scope.row.hidden" class="file-name--image--elimg" :src="scope.row.icon"></el-image>
              <el-image v-if="scope.row.hidden" style="opacity:0.5" class="file-name--image--elimg"
                        :src="scope.row.icon"></el-image>
            </div>
            <div class="file-name--name" v-if="scope.row.rename === undefined || scope.row.rename === false">
            <span class="smallHands">
            {{ scope.row.fileName }}
            </span>
            </div>
            <div v-else>
              <el-input ref="renameInput" v-model="home.rename" @keydown.enter="home.fileRename()"
                        style="width: 300px"/>
            </div>
          </div>
          <div class="file-name"  v-if="scope.row.selected === false || scope.row.selected === undefined">
            <div class="file-name--image">
              <el-image v-if="!scope.row.hidden" class="file-name--image--elimg" :src="scope.row.icon"></el-image>
              <el-image v-if="scope.row.hidden" style="opacity:0.5" class="file-name--image--elimg"
                        :src="scope.row.icon"></el-image>
            </div>
            <div class="file-name--name" v-if="scope.row.rename === undefined || scope.row.rename === false">
            <span class="smallHands">
            {{ scope.row.fileName }}
            </span>
            </div>
            <div v-else>
              <el-input ref="renameInput" v-model="home.rename" @keydown.enter="home.fileRename()"
                        style="width: 300px"/>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="修改日期">
        <template v-slot="scope">
          <span>{{ scope.row.lastModified }}</span>
        </template>
      </el-table-column>

      <el-table-column label="大小">
        <template v-slot="scope">
          <span>{{ formatBytes(scope.row.size) }}</span>
        </template>
      </el-table-column>

    </el-table>
  </div>

</template>

<style scoped>
/* 移除 el-upload 默认的拖拽样式 */
.custom-upload {
  border: none; /* 移除边框 */
  padding: 0; /* 移除内边距 */
  background: none; /* 移除背景色 */
}

</style>